import React from 'react';
import './index.scss'
import { useState, useEffect } from 'react';
import MyTable from '../../../../components/MyTable';
import { AppstoreOutlined, PlusOutlined, ExportOutlined, ClearOutlined, SyncOutlined, ExpandAltOutlined } from '@ant-design/icons';
import locale from 'antd/es/locale/zh_CN';
import { useNavigate } from 'react-router-dom';
import { Space, ConfigProvider, DatePicker, Input, Button, notification } from 'antd';
import service from '../../../../api';
const Allocation = () => {
    const [data, setData] = useState([])
    const [searchValue, setValue] = useState('')
    const { RangePicker } = DatePicker;
    const { Search } = Input;
    var history = useNavigate()
    const columns = [
        {
            title: "序号",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "单号",
            dataIndex: "productId",
            key: 'productId'
        },
        {
            title: "供应商",
            dataIndex: "supplier",
            key: "supplier",
        },
        {
            title: "部门",
            key: "dept",
            dataIndex: "dept",
        },
        {
            title: "重量",
            dataIndex: "cargoWeight:",
            key: 'cargoWeight:'
        },
        {
            title: "数量",
            key: "cargoNumber",
            dataIndex: "cargoNumber",
        },
        {
            title: "来货重量",
            dataIndex: "purchaseWeight",
            key: 'purchaseWeight'
        },
        {
            title: "来货数量",
            dataIndex: "purchaseNumber",
            key: 'purchaseNumber'
        },
        {
            title: "制单人",
            dataIndex: "tabPerson",
            key: 'tabPerson'
        },
        {
            title: "制单时间",
            dataIndex: "createTime",
            key: 'createTime'
        },
        {
            title: "状态",
            key: 'distributeListStatus',
            render: (_: any, record: any, index: any) => {
                if (record.distributeListStatus == 1) {
                    return (<>
                        <span className='dian1'></span>未分配
                    </>
                    )
                } else if (record.distributeListStatus == 2) {
                    return (<>
                        <span className='dian2'></span>已分配
                    </>)

                } else {
                    return (<>
                        <span className='dian3'></span>已完成
                    </>)
                }


            }
        },
        {
            title: "操作",
            key: 'set',
            render: (_: any, record: any, index: any) => {
                return (
                    <>
                        <Button type="primary" onClick={() => { handleSet(record.productId, record.distributeListStatus) }}>分配</Button>
                    </>

                )
            }
        }



    ];
    const [dataList, setdataList] = useState([]);
    useEffect(() => {
        requestList()
    }, [])
    var requestList = async () => {
        var res = await service.cxl.distributeList()
        res.data.data.forEach((item: any, index: any) => {
            item.key = index
        })
        setdataList(res.data.data)

    }
    var changeValue = (e: any) => {
        setValue(e.target.value)
    }
    var handleSearch = async () => {
        if (searchValue != '') {
            var res = await service.cxl.distributeList({ productId: searchValue, begin: data[0], end: data[1] })
            res.data.data.forEach((item: any, index: any) => {
                item.key = index
            })
            setdataList(res.data.data)
        } else {
            var res = await service.cxl.distributeList({ begin: data[0], end: data[1] })
            res.data.data.forEach((item: any, index: any) => {
                item.key = index
            })
            setdataList(res.data.data)
        }

    }
    var saveDate = (value: any, mode: any) => {
        setData(mode)
    }
    var handleSet = async (productId: any, distributeListStatus: any) => {
        if (distributeListStatus == 1) {
            distributeListStatus = 2
        } else if (distributeListStatus == 2) {
            distributeListStatus = 3
        } else {
            distributeListStatus = 1
        }

        var res = await service.cxl.SetdistributeList(productId, distributeListStatus)
        var res = await service.cxl.distributeList()
        if (res.data.code == 200) {
            notification.success({ message: '修改成功!' });
        }
        res.data.data.forEach((item: any, index: any) => {
            item.key = index
        })
        setdataList(res.data.data)

    }
    return (
        <div className='allocation'>
            <div className='title'>
                <div className='left'>
                    <span><AppstoreOutlined />黄金分类</span>
                    <span><ExportOutlined />导出</span>
                </div>
                <div className='right'>
                    <div className="time">
                        <Space direction="vertical" size={12}>
                            <ConfigProvider locale={locale}>
                                <RangePicker
                                    onChange={saveDate}
                                    format="YYYY-MM-DD"
                                />
                            </ConfigProvider>
                        </Space>
                    </div>
                    <div className="search">
                        <Search
                            onSearch={handleSearch}
                            value={searchValue}
                            onChange={changeValue}
                            placeholder="请输入选货单号"
                            allowClear
                            enterButton="搜索"

                        />
                    </div>
                    <div className="operation">
                        <ClearOutlined />
                        <SyncOutlined />
                        <ExpandAltOutlined />
                    </div>
                </div>
            </div>
            <MyTable data={dataList} columns={columns} />
        </div>
    );
};

export default Allocation;